<template>
    <div class="system-sysNotice-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="70vw" :close-on-click-modal="false">
            <el-form ref="deptDialogFormRef" :model="state.ruleForm" size="default" label-width="150px" >
                            <el-form-item v-show="false" label="公告ID" prop="id">
                                <el-input v-model="state.ruleForm.id" placeholder="公告ID"></el-input>
                            </el-form-item>
                            <el-form-item label="公告标题" prop="title">
                                <el-input v-model="state.ruleForm.title" placeholder="公告标题"></el-input>
                            </el-form-item>
                        <el-form-item label="公告内容" prop="content">
                            <div class="editor-container">
                                <fast-editor v-model:get-text="state.ruleForm.content"/>
                            </div>
                        </el-form-item>
                            <el-form-item label="公告类型" prop="type">
                                <fast-radio-group v-model="state.ruleForm.type" dict-type="NITICE_TYPE"></fast-radio-group>
                            </el-form-item>
                            <el-form-item label="公告状态" prop="status">
                                <fast-radio-group v-model="state.ruleForm.status" dict-type="SYS_STATE"></fast-radio-group>
                            </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input type="textarea" v-model="state.ruleForm.remark"></el-input>
                        </el-form-item>
                        <el-form-item label="创建时间" prop="createdTime">
                            <el-date-picker type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="创建时间" v-model="state.ruleForm.createdTime"></el-date-picker>
                        </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="onCancel" size="default">取 消</el-button>
                <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="systemSysNoticeDialog">
    import {reactive, defineAsyncComponent, ref} from 'vue';
    // 引入组件
    const  FastEditor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));
    import FastSelect from "/@/components/fast-select/src/fast-select.vue";
    import FastRadioGroup from "/@/components/fast-radio-group/src/fast-radio-group.vue";
    import FastImg from "/@/components/fast-upload/img.vue";
    import FastImgs from "/@/components/fast-upload/imgs.vue";
    import FastFile from "/@/components/fast-upload/file.vue";
    import { sysNoticeApi } from '/@/api/system/sysNotice';
    const baseApi = sysNoticeApi();
    // 定义子组件向父组件传值/事件
    const emit = defineEmits(['refresh']);
    const sysNoticeDialogFormRef = ref();

    const state = reactive({
        ruleForm: {
            id: '',
            title: '',
            content: '',
            type: '',
            status: '',
            remark: '',
            tenantId: '',
            revision: '',
            createdBy: '',
            createdTime: '',
            updatedBy: '',
            updatedTime: ''        },
        dialog: {
            isShowDialog: false,
            type: '',
            title: '',
            submitTxt: '',
        },
    });
    // 重置
    const resetFomr = () => {
        state.ruleForm = {
            id: '',
            title: '',
            content: '',
            type: '',
            status: '',
            remark: '',
            tenantId: '',
            revision: '',
            createdBy: '',
            createdTime: '',
            updatedBy: '',
            updatedTime: ''        }
    }
    const openDialog = (type: string, row: RowSysNoticeType) => {
        resetFomr();
        state.dialog.isShowDialog = true;
        if (type === 'edit'){
            state.ruleForm = row;
            state.dialog.title = '修改';
            state.dialog.submitTxt = '修 改';
            state.dialog.type = 'edit';
        }
        if (type === 'add') {
            state.dialog.title = '新增';
            state.dialog.submitTxt = '新 增';
            state.dialog.type = 'add';
        }
    };
    // 关闭弹窗
    const closeDialog = () => {
        state.dialog.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
        closeDialog();
    };
    // 提交
    const onSubmit = () => {
        emit('refresh', state.ruleForm);
    };

    // 暴露变量
    defineExpose({
        openDialog, closeDialog
    });
</script>
